<template>
  <div class="header-info">
    <div class="operation">
      <el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
        <router-link to="/tabs">
          <span class="dot"></span>
          <el-icon><ChatDotRound /></el-icon>
        </router-link>
      </el-tooltip>
    </div>
    <!-- 2、个人信息 -->
    <div class="info">
      <el-dropdown size="small">
        <span class="user-info">
          <el-avatar :size="30" :src="avatarImg" />
          <span class="name">admin</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="backLogin">
              <el-icon><CircleClose /></el-icon>
              <span>退出系统</span>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <el-icon><UserFilled /></el-icon>
              <span>个人信息</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-icon><EditPen /></el-icon>
              <span>修改密码</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import avatarImg from '@/assets/headImg.jpg' // 自动处理静态资源
import router from "@/router";

const message = ref(2);

function backLogin() {

}
</script>

<style scoped>
.header-info {
  display: flex;
  align-items: center;
  /*background-color: yellowgreen;*/
}
.operation {
  display: inline-flex;
  margin-right: 20px;
}
.operation a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 35px;
  color: #999;
}
.operation span:hover {
  background: #f2f2f2;
}
.operation span i {
  font-size: 20px;
}
.operation .dot {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 10;
  width: 6px;
  height: 6px;
  background: red;
  border-radius: 100%;
}
.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.user-info .name {
  margin-left: 8px;
}

/* 针对 Element Plus 组件 去掉edge鼠标悬停上去的黑框 */
:deep(.el-avatar:focus),       /* 头像 */
:deep(.el-dropdown:focus),     /* 下拉菜单 */
:deep(.el-tooltip__trigger:focus) {
  /* 提示框触发元素 */
  outline: none !important;
}
</style>
